<template>
	<view class="f-f-c p20">
		<u-navbar
		:autoBack="true" bgColor="#fff"
		leftIconColor='#000'
		:titleStyle="{ color: '#000'}"
		:title="title" rightText='' :border="false" :placeholder="true">
			<!-- <view slot="left"></view> -->
			<view slot="right" style="display: flex;">
				<span v-if="dataForm.id">{{status[dataForm.status]}}</span>
			</view>
		</u-navbar>
		<view class="f40 ">
			基本消息
		</view>
		<view class="p20 m20 b-rd b-s">
			<view class="f-s-b b-b">
				<span class="c6 f28" style="width: 180rpx;">姓名</span>
				<u--input
				     v-model="dataForm.name"
				     style="border: none;text-indent: 2rem;"
					 placeholder="请输入"
					></u--input>
				<span></span>
			</view>
			<view class="f-s-b b-b">
				<span class="c6 f28" style="width: 180rpx;">手机号</span>
				<u--input
				     v-model="dataForm.phone"
				     style="border: none;text-indent: 2rem;"
					 placeholder="请输入"
					></u--input>
				<span></span>
			</view>
			<view class="f-s-b b-b">
				<span class="c6 f28" style="width: 180rpx;">身份证号</span>
				<u--input
				     v-model="dataForm.idCard"
				     style="border: none;text-indent: 2rem;"
					 placeholder="请输入"
					></u--input>
				<span></span>
			</view>
			
			
			<view class="f-s-b pt20">
				<span class="c6 f28" style="width: 180rpx;">期望工作区域</span>
				<input placeholder="请选择城市" disabled="true" :value="dataForm.province + ' ' + dataForm.city + ' ' + dataForm.country" @click="lotusAddressData.visible = true" class="input">
					<lotus-address v-on:choseVal="choseValue" :lotusAddressData="lotusAddressData"></lotus-address>
				</input>
				<image @click="openPicker()" src="https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/pos2.png" style="width: 42rpx;" mode="widthFix"></image>
				
				<!-- <u-icon @click="openPicker()" name="arrow-right" color="#999" size="14"></u-icon> -->
			</view>
		</view>
		<view class="p20 m20 b-s b-rd f-f-c" >
			<span class="c6" style="font-weight: 500;">上传证件</span>
			<image v-if="!dataForm.imgFrond" @click="chooseImg(1)" style="width: 100%;" src="https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/face.png" mode=""></image>
			<image v-else @click="chooseImg(1)" style="width: 100%;" :src="dataForm.imgFrond" mode=""></image>
		    <view class="f-c f28 c6 mt20 mb20">上传身份证人像面</view>
			
			<image v-if="!dataForm.imgBack" @click="chooseImg(2)" style="width: 100%;" src="https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/coin.png" mode=""></image>
			<image v-else @click="chooseImg(2)" style="width: 100%;" :src="dataForm.imgBack" mode=""></image>
		    <view class="f-c f28 c6 mt20">上传身份证国徽面</view>
		
		</view>
		
		<view class="p20 m20 b-s b-rd f-f-c">
			<span class="mt20">1.加入的条件是什么?</span>
			<span class="mt10">回收员需要准备符合国家标准的电动三轮车或其他货车，报名成功后，也可咨询我们的相关工作人员沟通车辆情况。</span>
		    <span class="mt40">2.回收的废品怎么处理?</span>
			<span class="mt10">一对一指导，就近处理。</span>
			<span class="mt40">3.平均收入是多少?</span>
			<span class="mt10">回收员收入跟个人工作时长，品类，距离相关，多劳多得，我们会不定期开展相关奖励活动，可及时参与活动。</span>
		    <span class="mt40">4.工作范围多大?</span>
			<span class="mt10">工作范围就近安排，也可以自主选择合适的空白区域.</span>
		</view>
		<view class="">
			<u-radio-group v-model="value">
				<u-radio :name="true" activeColor='var(--theme)' shape="circle" >同意<span class="cp">《回收员协议》</span></u-radio>
			</u-radio-group>
		</view>
		<view class="sureBtn2" @click="confirm"
		 :class="dataForm.status == 0 || dataForm.status == 1 ? 'failcss':'' " >
			{{btnTxt}}
		</view>
	
		
	</view>
</template>


<script>
	import lotusAddress from "@/components/Winglau14-lotusAddress/Winglau14-lotusAddress.vue"
	export default {
		 components:{
		 	"lotus-address":lotusAddress
		 },
		data() {
			return {
				
				high:0,
				show:false,
				value:null,
				info:{},
			    dataForm:{
					name:'',
					phone:'',
					province: '',
					city: '',
					country: '',
					idCard:'',
					imgBack:'',
					imgFrond:'',
				},
				lotusAddressData:{
					visible:false,
					provinceName:'',
					cityName:'',
					townName:'',
				},
				isUpdate:false,
				title:'回收员注册',
				btnTxt:'提交申请',
				status:[
					'审核中','已通过','失败'
				],
			}
		},
		onReachBottom() {
			
		},
		onReady() {
			
		},
		onLoad(){
			
		},
		onShow() {
			
			this.getDetail()
		},
		methods: {
			getDetail(){
				let that = this
				this.$api.request('get', `recycler/app/getRecyclerApplyInfo`).then(res => {
				 console.log(res.data,'res')
				 if(res.data != null){
					 that.isUpdate = true
					 that.dataForm = res.data 
					 if(that.dataForm.status == 2){
						 that.btnTxt = '重新申请'
					 }else{
						 that.btnTxt = '提交申请'
					 }
				 }else{
					 that.isUpdate = false
				 }
				 
				}).catch(err => {
					console.log(err,'err')
				  // that.$api.msg('请求失败，请稍后再试')
				})
			},
			confirm(){
				let that = this
				
				if(this.dataForm.status == 0 || this.dataForm.status == 1){
					that.$api.msg('当前状态无法提交申请！')
					return
				}
				if(!this.dataForm.name){
					that.$api.msg('姓名未填写！')
					return
				}
				if(!this.dataForm.phone){
					that.$api.msg('手机号未填写！')
					return
				}
				if(!this.dataForm.province){
					that.$api.msg('请选择区域！')
					return
				}
				
				if(!this.dataForm.idCard){
					that.$api.msg('身份证号未填写！')
					return
				}
				if(this.dataForm.imgFrond == '' || this.dataForm.imgBack == ''){
					that.$api.msg('请上传身份证正反面！')
					return
				}
				if(this.value == null){
					that.$api.msg('请同意回收员协议！')
					return
				}
				let api = 'recycler/app/add'
				let m = 'post'
				if(this.isUpdate){
					api = 'recycler/app/edit'
					m = 'put'
				}
				this.$api.request(m , api,this.dataForm).then(res => {
				  that.$api.msg('操作成功')
				  that.getDetail()
				}).catch(err => {
					console.log(err,'err')
				  // that.$api.msg('请求失败，请稍后再试')
				})
			},
			// 上传
			chooseImg(type){
				this.$api.uploadImg(1,(res)=>{
					console.log(res)
					if(type == 1){
						this.dataForm.imgFrond = res
					}else{
						this.dataForm.imgBack = res
					}
				})
			},
			//打开地区选择框
			openPicker() {
				console.log('工作区域')
				this.lotusAddressData.visible = true;
			},
			choseValue(res){
				console.log('222')
           //res数据源包括已选省市区与省市区code
				this.lotusAddressData.visible = false;//visible为显示与关闭组件标识true显示false隐藏
				if(res.isChose){
					console.log(res)
					this.lotusAddressData.provinceName = res.provice;//省
					this.lotusAddressData.cityName = res.city;//市
					this.lotusAddressData.townName = res.town;//区

					//赋值到dataForm
					this.dataForm.province = res.provice
					this.dataForm.city = res.city
					this.dataForm.country = res.town

				}
			},
		}
	}
</script>

<style lang='scss'>
	page,
	.content {
		min-height: 50%;
		background-color: #f8f8f8;
	}

	.btn{
		width: 100%;
		height: 68rpx;
		background: #1AC388;
		border-radius: 34rpx 34rpx 34rpx 34rpx;
		opacity: 1;
		border: 2rpx solid var(--theme);
		text-align: center;
		line-height: 68rpx;
		color:#fff;
	}
	.btn2{
		width: 100%;
		height: 68rpx;
		background: rgba(26,195,136,0);
		border-radius: 34rpx 34rpx 34rpx 34rpx;
		opacity: 1;
		border: 2rpx solid var(--theme);
		text-align: center;
		line-height: 68rpx;
		color: var(--theme);
	}
	.failcss{
		background: #ccc;
	}
	
</style>
